<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>添加活动日记</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/webUpload/webuploader.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/mend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_cwy8y2uw4su4n29.css">
</head>

<body>
<div class="page-group">
    <div class="page">
        <!--搜索栏内容 !-->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left back" href="${basepath}/front/offlineComment/toPublicDiary">返回</a>

            <h1 class="title">
                添加日记
            </h1>
            <#--<a class="add-pull pull-right" id="addBtn" data-url="${basepath}/front/offlineComment/toPublicDiary">发布</a>-->
        <#--下一步-->
        <#--</button>-->
        </header>
        <!--内容部分 !-->
        <div class="content addDiary-content">
            <div class="editDiary-card card">
                <div class="card-content">
                    <div class="card-content-inner">
                        <div class="item-input">
                            <textarea placeholder="描述活动现场美好的一刻.." class="addDiary-info"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-block-title">评论照片(最多上传六张图片)</div>
            <div class="card img-card">
                <div class="card-content">
                    <ul class="card-content-inner imgList">
                        <li id="filePicker"><img src="/resource/front/dist/images/a11.jpg"></li>
                    </ul>
                </div>
                <input type="hidden" id="productImgs" name="imgs"/>
            </div>
            <div class="addBtn" data-url="${basepath}/front/offlineComment/toPublicDiary">发布</div>
        </div>
    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type='text/javascript' src='${staticpath}/webUpload/webuploader.min.js' charset='utf-8'></script>
<script> jQuery.noConflict();</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/offlineComment/addPublicDiary.js'></script>
<script>
    var imgArr = new Array();//声明全局数组
    jQuery(function ($) {//使用jquery$
        //图片上传初始化
        var uploader = WebUploader.create({
            auto: true, // 选完文件后，是否自动上传。
            swf: '${staticpath}/webUploader/Uploader.swf',
            server: '${basepath}/front/ued/config?action=uploadimage',
            // 选择文件的按钮,可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 只允许选择图片文件。
            fileNumLimit: 3,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        //上传成功后
        uploader.on('uploadSuccess', function (file, response) {
            uploader.removeFile(file);//需要移除掉文件队列缓存，避免第二次上传同样文件，无法上传的问题
            imgArr.push(response.url);//将URL插入全局数组//数组最后面添加一个或多个元素
            //判断是不是超过六张图片，如果是超过则把#filePicker隐藏
            if (jQuery(".imgList").find("li").length <= 6) {
                jQuery(".imgList").prepend("<li><img src='/" + response.url + "'><div class='del-div'><i class='del-img' data-url='" + response.url + "'></i></div></li>");
                jQuery("#productImgs").val(imgArr.join(","));  //数组转字符串赋值给input
                //在url插入上传成功的图片
                //绑定删除按钮事件
                jQuery(".del-div").click(function () {
                    //更新数组
                    var data = $(".del-img").attr("data-url");
                    //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
                    $.each(imgArr, function (index, item) {
                        if (item == data) {
                            imgArr.splice(index, 1);
                        }
                    });
                    //更新input值
                    jQuery("#productImgs").val(imgArr.join(","));
                    //移除图片显示
                    $(this).parent().remove();
                });
            } else {
                jQuery("#filePicker").hide();

            }

        });
    });

</script>
</body>
</html>